<template>
  <div class="btn-opt">
    <router-link
      class="btn-item"
      v-for="(btnItem, index) in routesInfo"
      :key="`btnItem-${index}`"
      :to="btnItem.path"
    >
      {{ btnItem.label }}
    </router-link>
  </div>
</template>

<script>
import { routesInfo } from "@/data/btn.js";

export default {
  name: "LinkBtn",
  data() {
    return {
      routesInfo,
    };
  },
};
</script>

<style lang="scss" scoped>
.btn-opt {
  padding: 10px;
  background-color: #f3f3f3;
  margin-right: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .btn-item {
    border: 1px solid #333;
    margin-bottom: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    text-decoration: none;
  }
}
</style>
